<template>
  <div class="contain">
    <div class="header">
      <Scroll/>
      <div class="more" @click="shoeMore">
        <img src="../assets/arrow-down.png" alt="">

      </div>
    </div>

    <div class="content">
      <div class="contantItem" v-for="item in store.state.discoveryItemList.discoveryItemList" :key="item.id">
        <div class="item-img">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="item-title">{{item.title}}</div>
        <div class="item-detail">
          <div class="author">
            <div class="avatar">
              <img :src="item.avatar" alt="">
            </div>
            {{item.name}}
          </div>

          <div class="like">
            <div class="like-img" @click="selectLike">
              <img v-if="isLike" src="../assets/Like.png" alt="">
              <img v-else src="../assets/Liked.png" alt="">
            </div>
            6.0万
          </div>
        </div>
      </div>
 
    </div>


  </div>
  
</template>

<script>
import Scroll from '../components/Scroll.vue'
import { useStore } from 'vuex'

export default {
  components: {
    'Scroll': Scroll
  },
  data() {
    const store = useStore()

    return{
      isLike: 1,
      store
    }
  },
  setup() {
    
  },
  methods: {
    selectLike() {
      if(this.isLike == 0) {
        this.isLike = 1
      } else {
        this.isLike = 0
      }
    }
  }
}
</script>

<style scoped>
.contain{
  width: 100%;
}

.header{
  width: 100%;
  display: flex;
}
.more{
  width: 100px;
  height: 35px;
  align-items: center;
  justify-content: center;
}
.more img{
  width: 70%;
  height: 20px;
  margin-top: 10px;
  margin-left: 5px;
}

.content{
  width: 100%;
  justify-content: center;
  column-count: 2;
  column-gap: 6px;
  padding: 0 2px;
  box-sizing: border-box;
}
.contantItem{
  width: 100%;
  height: fit-content;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 8px rgb(202, 202, 202);
  break-inside: avoid;
}
.item-img{
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
.item-img img{
  width: 100%;
  height: 100%;
}
.item-title{
  margin: 10px 10px;
  font-weight: bold;
  height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item-detail{
  padding: 0 5px;
  height: 40px;
  display: flex;
  width: 100%;
  /* justify-content: space-around; */
}

.author,
.like{
  display: flex;
  align-items: center;
  color: rgb(110, 106, 106);
}
.author{
  font-size: 10px;
  width: 55%;
}
.author-name{
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 5px;
}
.avatar img{
  width: 25px;
  height: 25px;
}

.like{
  /* width: 45%; */
  margin-right: 5px;
  font-size: 12px;
}
.like-img{
  width: 25px;
  height: 25px;
  margin-left: 7px;
  margin-right: 5px;
}
.like-img img{
  width: 100%;
  height: 100%;
}

 
</style>